<template>
    <div class="city-body">
      <a-table row-key="id" :columns="columns" :data="tableData" show-empty-tree :pagination="false">
        <template #productType="{ record }">
          <span>{{buildText(record,'productType')}}</span>
        </template>
        <template #optional="{ record }">
          <a-button type="primary" size="mini" @click="operate(record, 'edit')">编辑</a-button>
          <a-button type="primary" size="mini" status="danger" @click="operate(record, 'delete')">删除</a-button>
          <a-button type="outline" size="mini" @click="operate(record, 'add')">同级新建</a-button>
          <a-button type="outline" size="mini" @click="operate(record, 'addChildren')">子集新建</a-button>
        </template>
      </a-table>

      <!-- 新增/编辑城市配置弹窗 -->
      <a-modal v-model:visible="formVisible" :title="formTitle">
        <a-form ref="formRef" :model="formData" layout="vertical">
          <a-form-item label="服务类型" :rules="[{ required: true, message: '请选择服务类型' }]">
            <a-select v-model="formData.productType" placeholder="请选择服务类型">
              <a-option value="1">保洁</a-option>
              <a-option value="2">搬家</a-option>
              <a-option value="3">保养</a-option>
              <a-option value="4">维修</a-option>
              <!-- 其他服务类型选项 -->
            </a-select>
          </a-form-item>
<!--          <a-form-item label="服务产品" :rules="[{ required: true, message: '请选择服务产品' }]">-->
<!--            <a-select v-model="formData.serviceProduct" placeholder="请选择服务产品">-->
<!--              <a-option value="日常报价">日常报价</a-option>-->
<!--              <a-option value="开荒">开荒</a-option>-->
<!--            </a-select>-->
<!--          </a-form-item>-->
          <a-form-item label="城市名称" :rules="[{ required: true, message: '请输入城市名称' }]">
            <a-input v-model="formData.name" placeholder="请输入城市名称" />
          </a-form-item>
          <a-form-item label="城市代码" :rules="[{ required: true, message: '请输入城市代码' }]">
            <a-input v-model="formData.code" placeholder="请输入城市代码" />
          </a-form-item>
        </a-form>
        <template #footer>
          <a-button @click="formVisible = false">取消</a-button>
          <a-button type="primary" @click="handleSubmit">提交</a-button>
        </template>
      </a-modal>
    </div>
  </template>

  <script lang="ts">
  import {defineComponent, onMounted, reactive, ref, Ref} from 'vue';
  import { getCityConfigList, saveCityConfig, deleteCityConfig } from '@/api/cityConfig';

  export default defineComponent({
    name: 'CityConfigManagement',

    setup() {

      // 表格列定义
      const columns = [
        { title: '服务类型', dataIndex: 'productType', slotName: 'productType' },
        { title: '服务产品', dataIndex: 'product' },
        { title: '城市名称', dataIndex: 'name' },
        { title: '城市代码', dataIndex: 'code' },
        { title: '操作', slotName: 'optional'}
      ];

      const tableData = ref([])
      const productTypeMap = reactive({
        '1': '保洁',
        '2': '搬家',
        '3': '保养',
        '4': '维修'
      })
      // 新增/编辑城市配置
      const formRef = ref(null)
      const formVisible = ref(false);
      const formTitle = ref('城市配置');
      const formData = reactive({
        id: '',
        parentId: '',
        name: '',
        code: '',
        productType: ''
      });
      const methods = {
        operate(data: any, type: string){
          if(type === 'edit'){
            formTitle.value = '编辑城市配置'
            methods.setFormData(data,formData)
          } else if(type === 'delete'){
            this.$message.error('todo-没有删除接口！！！')
            return;
          } else if(type === 'add') {
            formTitle.value = '新建同级城市配置'
            methods.setFormData({
              id: null,
              parentId: data.parentId,
              name: '',
              code: '',
              productType: ''
            },formData)
          } else if(type === 'addChildren'){
            formTitle.value = '新建子集城市配置'
            methods.setFormData({
              id: null,
              parentId: data.id,
              name: '',
              code: '',
              productType: ''
            },formData)
          }
          formVisible.value = true
        },
        async getData(){
          const response = await getCityConfigList();
          tableData.value = methods.renameChildrenField(response);
        },
        async handleSubmit(){
          const res: any = await saveCityConfig(formData);
          if(res.message === "success"){
            await methods.getData()
          }
          formVisible.value = false;
        },
        buildText(data: any,key: string){
          if(key === 'productType'){
            return productTypeMap[data.productType] ?? '未知'
          }
        },
        renameChildrenField(data: any){
          return data.map(item => ({
            ...item,
            children: item.childrenList ? methods.renameChildrenField(item.childrenList) : null,
            childrenList: undefined  // 删除原来的 `childrenList` 字段
          }));
        },
        setFormData(source: any, target: any){
          Object.keys(target).forEach(key => {
            if (source.hasOwnProperty(key)) {
              target[key] = source[key];
            }
          });
        }
      }
      onMounted(()=>{
        methods.getData()
      })

      return {
        columns,
        tableData,
        formRef,
        formVisible,
        formTitle,
        formData,
        ...methods
      };
    },
  });
  </script>

<style lang="less">
.city-body {
  box-sizing: border-box;
  height: 100%;
  padding: 0 20px;
  .arco-table {
    .arco-table-td-content {
      .arco-btn {
        margin-right: 10px;
        &:last-child {
          margin: 0;
        }
      }
    }
  }
}
</style>